<template>
    <div class="listDiv mt10">
        <!-- <div class="searchDiv">
            <span class="btn search" @click="init">搜索</span>
            <span class="btn refresh" @click="obj.req.currentpage=1;init()"></span>
            <div class="searchRight">
            </div>
        </div> -->
        <div class="table_box"><div class="table_" id="tb">
            <ul class="head">
                <li class="mw80">申请人</li>
                <li class="mw80 wcen">头像</li>
                <li class="mw200 wcen">联系电话</li>
                <li class="mw300">申请事由</li>
                <li class="mw300">审核详情</li>
                <li class="mw200 wcen">申请时间</li>
                <li class="mw200 wcen">审核时间</li>
                <li class="mw150">审核</li>
            </ul>
            <div class="body">
                <ul v-for="x in obj.ary" :key="x">
                    <li class="mw80">{{x.name}}</li>
                    <li class="mw80 wcen">
                        <el-image v-for="(v,i) in x.face.split(',')" :key="i"  style="width: 40px; height: 40px" class="ml5" fit="cover" :preview-src-list="[proxy.$setting.globalUrl.fileurl+ '/visitor/'+ v]" :src="proxy.$setting.globalUrl.fileurl+ '/visitor/'+ v">
                            <template #error>
                                <div class="image-slot">
                                    <el-image  fit="cover" src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"/>
                                </div>
                            </template>
                        </el-image>
                    </li>
                    <li class="mw200 wcen">{{x.mobile}}</li>
                    <li class="mw300">
                        <el-tooltip class="box-item" effect="dark" :content="x.matter" placement="top-start" :disabled="x.matter.length<10">
                            <div class="lineOne pointer">{{x.matter}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw300">
                        <el-tooltip class="box-item" effect="dark" :content="x.verify" placement="top-start" :disabled="x.verify.length<10">
                            <div class="lineOne pointer">{{x.verify}}</div>
                        </el-tooltip>
                    </li>
                    <li class="mw200 wcen">{{x.intime}}</li>
                    <li class="mw200 wcen">{{x.verify_time}}</li>
                    <li class="mw150">
                        <el-button class="pointer edit_btn" type="success" :disabled="!!x.verify" @click="del(x.visitor_id,1)">通过</el-button>
                        <el-button class="pointer edit_btn" type="danger" :disabled="!!x.verify" @click="del(x.visitor_id,2)">拒绝</el-button>
                    </li>
                </ul>
            </div>
        </div>
        </div><Pager :value="obj.req" :init="init" />
    </div>
</template>

<script setup>
    import { reactive, getCurrentInstance, ref, toRefs, provide, computed } from 'vue'
    import Pager from '@/components/pager.vue'
    let { proxy } = getCurrentInstance()

    let obj = reactive({
        ary: [],
        req: {
            currentpage: 1,
            pagesize: 10,
            count: 0,
        }
    });
    let init = () => {
        proxy.$ajax({
            url: '/guard/visitor_list',
            data: obj.req,
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                obj.ary = d.msg.list
                obj.req.count = d.msg.count
            }
        }).catch(() => { })
    }

    const del = (id,state) =>{
        proxy.$ajax({
            url: '/guard/visitor_verify',
            data: { visitor_id: id , state: state},
            bfLoading: true
        }).then(d => {
            // console.log(d)
            if(d.success){
                proxy.elMessageMixin("审核成功", 'success')
                init()
            }else{
                proxy.elMessageMixin(d.err, 'error')
            }
        }).catch(() => { })
    }
</script>

<style scoped>
    ::-webkit-scrollbar { width:10px; background-color: #FFFFFF; }
    .search_select { width:100px!important; }
    .search_key { width:160px!important; }
    #tb ul li.li2 { width: 60px; }
    #tb ul li.li2 u { cursor: pointer; }
    #tb ul li.li3 { width: 145px; }
    #tb ul li.li4 { width: 45px; }
</style>